<template>
  <div class="MyTaskRecard">
    <!-- 61 -->
    <div class="MyTaskRecard-header">
      <a-input-group v-if="filters.length" compact>
        <!-- <a-select
          style="width: 30%"
          :dropdown-style="{
            zIndex: 99999,
          }"
          :value="filter"
          @select="filterChange"
        >
          <a-select-option
            v-for="(item1) in filters"
            :key="item1.id"
            :value="item1.id"
          >
            {{ item1.cName }}
          </a-select-option>

        </a-select> -->

        <a-input-search
          placeholder="请输入关键字搜索"
          style="width: 100%"
          allow-clear
          :loading="searchLoading"
          @search="search"
        />
      </a-input-group>
    </div>
    <div class="MyTaskRecard-container">
      <My-Task-Recard-Cell
        v-for="(item1, i) in list"
        :key="i"
        :cell="item1"
        :class="{
          zebraColor: i % 2 === 0,
          currentCell: i === currentCell,
          cellNorMal: 1
        }"

        @itemClick="(item) => itemClick(item, i)"
      />
    </div>
    <My-Task-Detail
      :visible.sync="taskDetailShowDialog"
      :state="state"
      :model-id="modelId"
      :project-title="projectTitle"
      :left-card-list="leftCardList"
    />
  </div>
</template>

<script>
import MyTaskDetail from '@/views/digitalReportQr1/components/MyTaskDetail';
import { modelFormStartedList, findBusinessFieldByModelId } from '@/api/dynamicInterface';

const MyTaskRecardCell = {
  name: 'MyTaskRecardCell',

  props: {
    cell: {
      type: Object,
      default: () => ({})
    }
  },

  methods: {
    itemClick(item) {
      this.$emit('itemClick', item);
    }
  },

  render() {
    const { cell, itemClick } = this;
    const { startedUserName, modelName } = cell;

    const conent = startedUserName + '发起了' + modelName;
    return (
      <div class='MyTaskRecardCell'>
        <div class='MyTaskRecardCell-container'>
          <div class='MyTaskRecardCell-label'>
            { conent }
          </div>

          <div
            class='MyTaskRecardCell-detail-btn'
            onClick={() => itemClick(cell)}
          >
            查看详情
          </div>
        </div>
      </div>
    );
  }
};

export default {
  name: 'MyTaskRecard',

  components: {
    MyTaskRecardCell,
    MyTaskDetail
  },

  props: {
    item: {
      type: Object,
      default: () => ({})
    },

    modelId: {
      type: [String, Number],
      default: ''
    },

    visible: {
      type: Boolean,
      default: false
    },
    leftCardList: {
      type: Array,
      default: () => ([])
    },
    projectTitle: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      list: [],
      searchLoading: false,
      taskDetailShowDialog: false,

      currentCell: -1,

      filter: '',
      filters: [],

      state: {}
    };
  },

  watch: {
    visible: {
      handler: function(v) {
        if (v) {
          this.init(v);
        }
      },
      immediate: false
    }
  },

  methods: {
    init(v) {
      this.clear();
      this.getData();
      this.getFilterData();
    },

    getFilterData() {
      const { modelId } = this;
      this.searchLoading = true;
      findBusinessFieldByModelId({
        modelId
      }).then(res => {
        this.searchLoading = false;
        const { success, data } = res;
        if (success) {
          if (data && data.length) {
            this.filter = data[0].id;
            this.filters = data;
          }
        }
      });
    },

    itemClick(item, i) {
      this.taskDetailShowDialog = true;
      this.currentCell = i;
      const state = {
        item
      };

      this.state = state;
    },

    search(v) {
      const { filter } = this;
      this.list = [];
      const requestAdition = v ? {
        'businessField': {
          'id': filter,
          'value': v
        }
      } : {};

      this.getData(requestAdition);
    },

    clear() {
      this.list = [];
      this.filters = [];
      this.filter = '';
      this.state = {};
      this.currentCell = -1;
    },

    filterChange(v) {
      this.filter = v;
    },

    getData(data) {
      const { modelId, item } = this;
      const requestAdition = data || {};
      modelFormStartedList({
        modelId,
        programCode2: item.ID,
        ...requestAdition
      }).then(res => {
        const { success, data } = res;
        if (success) {
          console.log(data);
          this.list = data;
        }
      });
    }
  }

};
</script>

<style lang="scss" scoped>
/deep/ .MyTaskRecardCell {
  color: #666666;
  .MyTaskRecardCell-container {
    padding: 8px 16px;
    display: flex;
    .MyTaskRecardCell-label {
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .MyTaskRecardCell-detail-btn {
      text-decoration: underline;
      color: #1D96FF;
      cursor: pointer;
      margin-left: 10px;
      display: flex;
      align-items: flex-end;
    }
  }
}

.MyTaskRecard {
  width: 300px;
  .MyTaskRecard-container {
    max-height: 400px;
    min-height: 200px;
    overflow: auto;
    margin-top: 10px;

    .zebraColor {
      background-color: #EDF4FF;
    }

    .cellNorMal {
      position: relative;
      &::before {
        content: '';
        display: inline-block;
        position: absolute;
        width: 7px;
        height: 7px;
        left: 5px;
        top: 13px;
        border-radius: 20px;
        background-color: #DDDDDD;
      }

      &.currentCell {
        &::before {
          background-color: #1492FF;
        }
      }
    }

  }
}

</style>
